<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熙心健康体检系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
       
        body {
            background-color: #f5f5f5;
        }
       
        /* 顶部黑色边框 */
        .header {
            background-color: #000;
            color: white;
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            position: sticky;
            top: 0;
            z-index: 100;
        }
       
        .header-title {
            font-size: 20px;
            font-weight: bold;
        }
       
        .admin-area {
            display: flex;
            align-items: center;
        }
       
        .admin-name {
            margin-right: 15px;
        }

        /* 修改为链接样式 */
        .logout-link {
            background-color: #ff0000;
            color: white;
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 3px;
            display: inline-block;
        }

        .logout-link:hover {
            background-color: #cc0000;
        }
       
        /* 主体布局 */
        .container {
            display: flex;
            min-height: calc(100vh - 60px);
        }
       
        /* 左侧黑色边框导航 */
        .sidebar {
            width: 200px;
            background-color: #000;
            padding: 20px 0;
            position: sticky;
            top: 60px;
            height: calc(100vh - 60px);
            overflow-y: auto;
        }
       
        .nav-menu {
            list-style: none;
        }
       
        .nav-menu li {
            padding: 12px 20px;
        }
       
        .nav-menu a {
            color: white;
            text-decoration: none;
            display: block;
        }
       
        .nav-menu a:hover {
            color: #ddd;
        }
       

    .main {
      flex: 1; padding: 20px;
      background: #f9f9f9;
    }

    h2 {
      margin-bottom: 12px; color: #333;
    }

    .section {
      margin-bottom: 20px;
      border: 1px solid #ddd;
      border-radius: 6px;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      overflow: hidden;
    }

    details > summary {
      cursor: pointer;
      padding: 12px 20px;
      font-weight: bold;
      background: #e9f0f9;
      border-bottom: 1px solid #ccc;
      position: relative;
      list-style: none;
    }

    details > summary::marker {
      display: none;
    }

    details > summary::after {
      content: '▶';
      position: absolute;
      right: 20px;
      transform: rotate(0deg);
      transition: transform 0.3s ease;
    }

    details[open] > summary::after {
      transform: rotate(90deg);
    }

    .content {
      padding: 15px 20px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 15px;
    }

    .row-2 { grid-template-columns: 1fr 1fr; }
    .field {
      display: flex;
      align-items: center;
    }

    .field label {
      min-width: 90px;
      margin-right: 6px;
      color: #333;
    }

    .field input, .field select {
      flex: 1;
      padding: 6px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .unit, .normal-range {
      margin-left: 6px;
      font-size: 12px;
      color: #888;
      white-space: nowrap;
    }

    textarea {
      width: 100%;
      padding: 6px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .btn {
      margin: 10px 0 0 20px;
      padding: 8px 16px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .btn:hover {
      background: #0056b3;
    }

  </style>
</head>
<body>
   <!-- 顶部黑色边框 -->
     <div class="header">
         <div class="header-title">熙心健康体检系统</div>
         <div class="admin-area">
             <span class="admin-name">系统管理员：admin</span>
             <!-- 修改为超链接 -->
             <a href="http://127.0.0.1:8848/xikangdemo1/team12/login.html" class="logout-link">OUT</a>
         </div>
     </div>
    
     <!-- 主体内容 -->
     <div class="container">
         <!-- 左侧黑色边框导航 -->
         <div class="sidebar">
             <ul class="nav-menu">
          <li><a href="http://127.0.0.1:8848/xikangdemo1/team12/shouye.html">首页</a></li>
                 <li><a href="http://127.0.0.1:8848/xikangdemo1/team12/order.html">体检预约</a></li>
                 <li><a href="http://127.0.0.1:8848/xikangdemo1/team12/orderlist.html">预约列表</a></li>
                 <li><a href="http://127.0.0.1:8848/xikangdemo1/team12/binglidemo.html">体检客户查询</a></li>
             </ul>
    </div>

    <div class="main">
      <h2>体检信息录入</h2>

      <!-- 查询编号 -->
      <details class="section" open>
        <summary>体检信息查询</summary>
        <div class="content">
          <div class="field"><label>体检编号</label><input type="text" placeholder="请输入编号"></div>
        </div>
      </details>

      <!-- 客户基本信息 -->
      <details class="section" open>
        <summary>客户基本信息</summary>
        <div class="content row-2">
          <div class="field"><label>订单编号</label><input type="text" value="202310523212565"></div>
          <div class="field"><label>手机号码</label><input type="text" value="21300000000"></div>
          <div class="field"><label>姓名</label><input type="text" value="张一山"></div>
          <div class="field"><label>性别</label><input type="text" value="女"></div>
          <div class="field"><label>套餐类型</label><input type="text" value="女士套餐D"></div>
          <div class="field"><label>体检日期</label><input type="date" value="2023-10-12"></div>
        </div>
      </details>

      <!-- 一般检查 -->
      <details class="section" open>
        <summary>一般检查基础项目</summary>
        <div class="content row-2">
          <div class="field"><label>身高</label><input type="text" placeholder="请输入身高"><span class="unit">cm</span></div>
          <div class="field"><label>体重</label><input type="text" placeholder="请输入体重"><span class="unit">kg</span></div>
          <div class="field"><label>BMI</label><input type="text" value="22.9"></div>
          <div class="field"><label>脉搏</label><input type="text" placeholder="请输入脉搏"><span class="unit">次/分钟</span></div>
          <div class="field"><label>收缩压</label><input type="text" placeholder="请输入收缩压"></div>
          <div class="field"><label>舒张压</label><input type="text" placeholder="请输入舒张压"></div>
        </div>
        <div class="content">
          <div class="field" style="grid-column: span 2;"><label>科室小结</label><textarea rows="3" placeholder="请输入小结"></textarea></div>
          <div class="field"><label>录入医师</label><input type="text"></div>
          <div class="field"><label>责任医师</label><input type="text"></div>
        </div>
        <button class="btn">保存</button>
      </details>

      <!-- 视力辨色力 -->
      <details class="section">
        <summary>视力 + 辨色力</summary>
        <div class="content row-2">
          <div class="field">
            <label>色觉检查</label>
            <input type="text" value="输入正常数据" onclick="this.style.display='none';this.nextElementSibling.style.display='inline-block'">
            <select style="display:none">
              <option>正常</option>
              <option>红绿色盲</option>
              <option>色弱</option>
            </select>
          </div>
          <div class="field"><label>右眼裸眼视力</label><input type="text"><span class="normal-range">5.0‑5.2</span></div>
          <div class="field"><label>右眼矫正视力</label><input type="text"><span class="normal-range">5.0‑5.2</span></div>
          <div class="field"><label>左眼裸眼视力</label><input type="text"><span class="normal-range">5.0‑5.2</span></div>
          <div class="field"><label>左眼矫正视力</label><input type="text"><span class="normal-range">5.0‑5.2</span></div>
        </div>
		<div class="content">
		  <div class="field" style="grid-column: span 2;"><label>科室小结</label><textarea rows="3" placeholder="请输入小结"></textarea></div>
		  <div class="field"><label>录入医师</label><input type="text"></div>
		  <div class="field"><label>责任医师</label><input type="text"></div>
		</div>
        <button class="btn">保存</button>
      </details>

      <!-- 其他折叠模块 -->
      <details class="section"><summary>血常规24项</summary><div class="content"><p>血常规24项具体录入页面</p></div></details>
      <details class="section"><summary>肝功四项</summary><div class="content"><p>肝功四项具体录入页面</p></div></details>
      <details class="section"><summary>肾功能三项</summary><div class="content"><p>肾功能三项具体录入页面</p></div></details>
      <details class="section"><summary>血脂四项</summary><div class="content"><p>血脂四项具体录入页面</p></div></details>
      <details class="section"><summary>尿常规24项</summary><div class="content"><p>尿常规24项具体录入页面</p></div></details>
      <details class="section"><summary>颈动脉彩超</summary><div class="content"><p>颈动脉彩超具体录入页面</p></div></details>
      <details class="section"><summary>头部CT</summary><div class="content"><p>头部CT具体录入页面</p></div></details>

    </div>
  </div>
</body>
</html>


